<template name="skeleton">
  <view class="sk-container">
    <view class="head-wrapper">
      <view class="post-topic sk-transparent">
        <view class="topic-icon sk-transparent sk-text-14-2857-858 sk-text">#</view>
        <view style="padding-bottom:0px">
          <view
              class="u-transition transition--u-transition data-v-5cec8177 transition--data-v-5cec8177 u-fade-enter-to transition--u-fade-enter-to u-fade-enter-active transition--u-fade-enter-active"
              style="transition-duration:300ms;transition-timing-function:ease-out;">
            <view class="u-tag-wrapper tag--u-tag-wrapper data-v-2fd891bb tag--data-v-2fd891bb">
              <view
                  class="u-tag tag--u-tag data-v-2fd891bb tag--data-v-2fd891bb u-tag--square tag--u-tag--square u-tag--primary--plain tag--u-tag--primary--plain u-tag--mini tag--u-tag--mini"
                  style="margin-right:0;margin-top:0;;background-color:transparent;color:#4ea4f9;border-color:transparent;">
                <text
                    class="u-tag__text tag--u-tag__text data-v-2fd891bb tag--data-v-2fd891bb u-tag__text--primary tag--u-tag__text--primary u-tag__text--primary--plain tag--u-tag__text--primary--plain u-tag__text--mini tag--u-tag__text--mini sk-transparent sk-text-0-0000-977 sk-text"
                    style="color:#4ea4f9;">选择话题
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="post-right">
        <text class="sk-transparent sk-text-14-2857-604 sk-text">选择话题或者模糊匹配话题列表</text>
        <image class="right-icon sk-image"></image>
      </view>
      <view class="u-popup popup--u-popup data-v-05c24e9b popup--data-v-05c24e9b"></view>
    </view>

    <view class="post-content">
      <view style="margin: 10px 0">
        <button app-parameter="true"
                class="u-button button--u-button u-reset-button button--u-reset-button data-v-5ce41ee6 button--data-v-5ce41ee6 u-button--primary button--u-button--primary u-button--circle button--u-button--circle u-button--small button--u-button--small sk-transparent sk-button sk-pseudo sk-pseudo-circle"
                data-name="true" form-type="true" hover-class="u-button--active" hover-start-time="0"
                hover-stay-time="200" lang="en" open-type="true" send-message-img="true" send-message-path="true"
                send-message-title="true" session-from="true" style=";" hover-stop-propagation="true">发布
        </button>
      </view>

      <view style="margin: 10px 0 30px 0">
        <button app-parameter="true"
                class="u-button button--u-button u-reset-button button--u-reset-button data-v-5ce41ee6 button--data-v-5ce41ee6 u-button--primary button--u-button--primary u-button--circle button--u-button--circle u-button--small button--u-button--small sk-transparent sk-button sk-pseudo sk-pseudo-circle"
                data-name="true" form-type="true" hover-class="u-button--active" hover-start-time="0"
                hover-stay-time="200" lang="en" open-type="true" send-message-img="true" send-message-path="true"
                send-message-title="true" session-from="true" style=";" hover-stop-propagation="true">发布
        </button>
      </view>


      <view class="u-grid grid--u-grid data-v-10b668c8 grid--data-v-10b668c8" style="display: flex;
    flex-wrap: wrap;">
        <view class="u-grid-item item--u-grid-item data-v-0a78094b item--data-v-0a78094b"
              hover-class="u-grid-item--hover-class" hover-stay-time="200"
              style="background:transparent;width:33.333333333333336%;">
          <image class="content-images sk-image"></image>

        </view>
        <view class="u-grid-item item--u-grid-item data-v-0a78094b item--data-v-0a78094b"
              hover-class="u-grid-item--hover-class" hover-stay-time="200"
              style="background:transparent;width:33.333333333333336%;">
          <image class="content-images sk-image"></image>

        </view>
        <view class="u-grid-item item--u-grid-item data-v-0a78094b item--data-v-0a78094b"
              hover-class="u-grid-item--hover-class" hover-stay-time="200"
              style="background:transparent;width:33.333333333333336%;">
          <image class="content-images sk-image"></image>

        </view>
        <view class="u-grid-item item--u-grid-item data-v-0a78094b item--data-v-0a78094b"
              hover-class="u-grid-item--hover-class" hover-stay-time="200"
              style="background:transparent;width:33.333333333333336%;">
          <image class="content-images sk-image"></image>

        </view>
        <view class="u-grid-item item--u-grid-item data-v-0a78094b item--data-v-0a78094b"
              hover-class="u-grid-item--hover-class" hover-stay-time="200"
              style="background:transparent;width:33.333333333333336%;">
          <image class="content-images sk-image"></image>

        </view>
        <view class="u-grid-item item--u-grid-item data-v-0a78094b item--data-v-0a78094b"
              hover-class="u-grid-item--hover-class" hover-stay-time="200"
              style="background:transparent;width:33.333333333333336%;">
          <view class="add-img-container" style="margin-top: 0.5px">
            <image class="add-img sk-image"></image>
          </view>
        </view>
      </view>
      <view id="bottom-list" style="  margin-top: 80px;
  width: 90vw;
  position: absolute;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  bottom: 0;">
        <view id="bottom-image">
          <image style="margin: 3px;padding:0.6rem;width:1.7rem;height:1.7rem" class="sk-image"></image>
          <image style="margin: 3px;padding:0.6rem;width:1.7rem;height:1.7rem" class="sk-image"></image>
          <image style="margin: 3px;padding:0.6rem;width:1.7rem;height:1.7rem" class="sk-image"></image>
          <image style="margin: 3px;padding:0.6rem;width:1.7rem;height:1.7rem" class="sk-image"></image>
          <image style="margin: 3px;padding:0.6rem;width:1.7rem;height:1.7rem" class="sk-image"></image>
        </view>
        <view>
          <button app-parameter="true"
                  class="u-button button--u-button u-reset-button button--u-reset-button data-v-5ce41ee6 button--data-v-5ce41ee6 u-button--primary button--u-button--primary u-button--circle button--u-button--circle u-button--small button--u-button--small sk-transparent sk-button sk-pseudo sk-pseudo-circle"
                  data-name="true" form-type="true" hover-class="u-button--active" hover-start-time="0"
                  hover-stay-time="200" lang="en" open-type="true" send-message-img="true" send-message-path="true"
                  send-message-title="true" session-from="true" style=";" hover-stop-propagation="true">发布
          </button>
        </view>
      </view>
      <view>
        <view class="u-popup popup--u-popup data-v-05c24e9b popup--data-v-05c24e9b"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style lang="scss">

.sk-transparent {
  color: transparent !important;
}

.sk-text-14-2857-858 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 40.5797rpx;
  position: relative !important;
}

.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}

.sk-text-0-0000-977 {
  background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
  background-size: 100% 21.7391rpx;
  position: relative !important;
}

.sk-text-14-2857-604 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 28.4058rpx;
  position: relative !important;
}

.sk-button {
  color: #EFEFEF !important;
  background: #EFEFEF !important;
  border: none !important;
  box-shadow: none !important;
}

.sk-image {
  background: #EFEFEF !important;
}

.sk-pseudo::before, .sk-pseudo::after {
  background: #EFEFEF !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}

.sk-pseudo-rect::before, .sk-pseudo-rect::after {
  border-radius: 0 !important;
}

.sk-pseudo-circle::before, .sk-pseudo-circle::after {
  border-radius: 50% !important;
}

.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}

.head-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.02);
  padding: 0 1rem;
  height: 2.5rem;
  position: relative;
}

.right-icon {
  height: 1rem;
  width: 1rem;
  padding-left: 0.5rem;
}

.topic-icon {
  height: 0.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  background-color: #4ea4f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topic-left-text {
  padding-left: 0.2rem;
  color: #4ea4f9;
  font-size: 12px;
}

.post-topic {
  display: flex;
  align-items: center;
  color: #4ea4f9;
}

.post-right {
  display: flex;
  align-items: center;
  color: rgba(192, 192, 192, 0.67);
  font-size: 0.7rem;
}

.post-content {
  padding: 0 0.79rem;
}

#bottom-list {
  margin-top: 80px;
  width: 90vw;
  position: absolute;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  bottom: 0;
}


.content-images {
  border-radius: 5px;
  width: 7.5rem;
  height: 7.5rem;
}

.add-img-container {
  //position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -1.35rem;
  background-color: rgba(192, 192, 192, 0.11);
  border-radius: 3px;
  width: 7.5rem;
  height: 7.5rem;
}

.add-img-container image {
  scale: 0.6;
}

.add-img {
  border-radius: 5px;
  width: 7.5rem;
  height: 7.5rem;
}


</style>
